<template>
<div>
    <!-- 头部组件 -->
    <navgitar title="我的跟帖" ></navgitar>
    <div class="comment-item" v-for="(value,index) in commentlist" :key='index'>
        <div class="date">{{value.create_date}}</div>
        <div class="parent-item" v-if='value.parent'>
           <div class="parent-user">回复：{{value.parent.user.nickname}}</div>
           <div class="parent-comment">
               {{value.parent.content}}
           </div>
        </div>
        <div class="mycomment">
            {{value.content}}
        </div>
        <router-link to='#' class="link">
            原文：{{value.post.title}}
        </router-link>
    </div>
</div>
</template>

<script>
import navgitar from '../components/navgitar'
export default {
  components:{
    //注册导航条
      navgitar
  },
  data(){
         return{
             commentlist:[]
         }
  },
  mounted(){
      this.$axios({
          url:'/user_comments',
          method:'get',
          headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      }).then((res)=>{
          console.log(res); 
          this.commentlist=res.data.data
      })
  }
}
</script>
<style lang='less' scoped>
.comment-item{
    padding: 30/360*100vw;
    border-bottom: 2px solid #ccc;
.date{
    color:#888
}
.parent-item{
    padding: 10/360*100vw;
    font-size: 12px;
    background-color: #ccc;
    margin-top: 10/360*100vw;
    color: rgba(134, 134, 134, 0.866666666666667);;
    .parent-comment{
        margin-top: 10/360*100vw;
    }
}
.mycomment{
    margin-top: 10/360*100vw;
    color: rgba(0, 0, 0, 0.866666666666667);;
}
.link{
    display: block;
    margin-top: 15/360*100vw;
    color: #999;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

}

</style>
